<template>
	<div class="case_list table-theme">
		<head-title title="营销--案例列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"></div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add">
						<el-button type="primary" @click="add()">添加案例</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总数据数:{{total}}</p>
			<el-table :data="caseList" border>
				<el-table-column label="序号" align="center" prop="case_id"></el-table-column>
				<el-table-column label="店铺名字" align="center" prop="store_name"></el-table-column>
				<el-table-column label="案例主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_thumb"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="案例名字" align="center" prop="case_name"></el-table-column>
				<el-table-column label="风格" align="center" prop="style_name"></el-table-column>
				<el-table-column label="平方数" align="center">
					<template slot-scope="scope">
						{{ scope.row.square }} ㎡
					</template>
				</el-table-column>
				<el-table-column label="空间类型" align="center" prop="space"></el-table-column>
				<el-table-column label="排序" align="center" prop="" width="180">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="点击修改排序" placement="bottom">
							<div class="sort-input-view" @click.stop="setSort(scope.row.case_id, scope.row.sort)">
								<el-input v-if="sortid == scope.row.case_id" v-model="infoForm.sort" placeholder="" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">
									<el-button slot="append" icon="el-icon-check" @click.stop="postSort(0)"></el-button>
									<el-button slot="append" icon="el-icon-close" @click.stop="postSort(1)"></el-button>
								</el-input>
								<span v-else>{{ scope.row.sort }}</span>
							</div>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" active-text="" inactive-text=""
						 @change="upDown($event, scope.row.case_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="扫码查看" align="center">
					<template slot-scope="scope">
						<el-popover placement="left" title="" trigger="hover">
							<vue-qr :text="codeUrl + scope.row.case_id" :size="200"></vue-qr>
							<vue-qr slot="reference" :text="codeUrl + scope.row.case_id" :size="60"></vue-qr>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="上传类型" align="center" prop="typeName" v-if="admin_id == 1"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="data(scope.row.case_id)">修改</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.case_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import VueQr from 'vue-qr';
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			ImgPopover,
			VueQr
		},
		data() {
			return {
				codeUrl: `${this.$domain}/web/shop/#/pages/case-list/case-details/case-details?case_id=`,
				admin_id: localStorage.getItem('admin_id'),
				sortNum: '',
				sortid: '',
				caseList: [],
				total: 0,
				totalData: 0,
				infoForm: {
					sort: '',
					case_id: ''
				},
				store_id:'',
				searchOption:[{
					value:0,
					label:'案例名称'
				}],
				classSelect:0,
				selectContent:''
			};
		},
		watch: {
			'infoForm.sort': function(val) {
				if (val < 0) {
					this.infoForm.sort = 0;
					this.$message.error('请输入正确排序');
				}
			}
		},
		methods: {
			// 初始化列表
			init(e) {
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					order_by: 'add_time',
					asc: 1,
					keyword: this.selectContent
				};
				if (this.admin_id == 3) {
					data.user_id = localStorage.getItem('user_id');
				}
				if(this.store_id){
					data.store_id = this.store_id
				}
				this.caseList = [];
				this.$http(this.$ApiList.caseList, data).then(res => {
					this.total = res.datas.count;
					this.caseList = res.datas.data;
				});
			},
			// 上下架
			upDown(e, id) {
				let data = {
					case_id: id,
					status: e
				};
				this.$http(this.$ApiList.caseDown, data).then(res => {
					if (res.code == 200) {
						this.$layer.msg('操作成功');
					}
				});
			},
			// 删除
			del(id) {
				this.$confirm('是否删除当前案例?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							case_id: id
						};
						this.$http(this.$ApiList.delCase, data).then(res => {
							this.$layer.msg('删除成功');
							setTimeout(() => {
								this.init();
							}, 1500);
						});
					})
					.catch(() => {
						// 取消
					});
			},
			// 编辑
			data(id) {
				this.$router.push({
					path: '/case_data',
					query: {
						id: id
					}
				});
			},
			// 添加
			add() {
				this.$router.push({
					path: '/case_data'
				});
			},
			refreshPage() {
				this.page = 1;
				this.selectContent = '';
				this.init();
			},
			setSort(id, sort) {
				this.sortNum = sort;
				this.sortid = id;
				this.infoForm.sort = sort;
				this.infoForm.case_id = id;
			},
			postSort(type) {
				//  0 确定 1取消
				if (type == 0) {
					if (this.sortNum == this.infoForm.sort) {
						this.sortid = '';
						return;
					}
					this.$http(this.$ApiList.CaseUp, this.infoForm).then(res => {
						this.sortid = '';
						this.init();
					});
				} else {
					this.sortid = '';
				}
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
		},
		created() {
			if(this.$route.query.store_id){
				this.store_id = this.$route.query.store_id
			}
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	.search .el-form-item{
		margin-bottom: 0;
	}
</style>
